<template>
  <div
    id="app"
    :class="{
      book: this.$path && this.$path == '/book',
      en: lang === 'EN',
      top: this.btnFlag == false,
      mobile: this.$store.state.webType == 'h5',
    }"
  >
    <!-- 开屏视频 -->
    <!-- <div class="fix-view" v-if="isPlay && webLinks.tvUrl">
      <div class="model"></div>
      <video
        ref="homeVideo"
        :src="webLinks.tvUrl"
        @mouseover="playVideo"
        :autoplay="true"
        :muted="false"
        data-wf-ignore="true"
        data-object-fit="cover"
        controls
        @ended="handleExitFullScreen"
      ></video>
      <div class="jump-view">
        <div class="jump" @click="handleExitFullScreen">跳过视频 ></div>
      </div>
    </div> -->
    <div class="fix-line" v-if="this.$store.state.webType === 'pc'">
      <div class="nav-btn">
        <div class="btn-item nav-search">
          <img
            src="@/assets/images/nav-search.png"
            @click="
              searchShow = !searchShow;
              allMenuClick = false;
            "
            alt="中国新闻发布-搜索"
          />
        </div>
        <div class="btn-item nav-lan">
          <span v-if="!lang || lang != 'EN'" @click="switchLanguage('EN')"
          >English</span
          >
          <span v-if="lang === 'EN'" @click="switchLanguage('CN')">中文CN</span>
          <!-- <span>{{ $t("theQuarterly") }}</span> -->
        </div>
        <div class="btn-item nav-car" @click="this.$goShopping">
          <img src="@/assets/images/nav-car.png"/>
          {{ $t('subscribe') }}
        </div>
      </div>
    </div>
    <nav class="navbar" v-if="this.$store.state.webType === 'pc'">
      <img
        v-if="this.$store.state.lang === 'CN'"
        class="nav-icon"
        @click="goPage('/')"
        src="@/assets/images/nav-logo-blue.png"
        alt="中国新闻发布"
      />
      <img
        v-if="this.$store.state.lang === 'EN'"
        class="nav-icon"
        @click="goPage('/')"
        src="@/assets/images/nav-logo-blue-en.png"
        alt="中国新闻发布"
      />
      <div
        class="nav-menu"
        :class="{ no: activeReady === false }"
        ref="myTabRef"
      >
        <template v-for="(menu, index) in menuList">
          <!-- disabled: menu.menuId == 1093, -->
          <!-- @click="menu.menuId == 1093 ? '' : goPage(menu)" -->
          <div
            class="menu-item"
            v-if="menu.path != '0'"
            :class="{
              active: menu.path === $path,
            }"
            :key="index"
            @click="goPage(menu)"
            :ref="`tab${menu.menuNameEnglish}Ref`"
          >
            {{ menu.menuName }}
          </div>
          <!-- disabled: menu.menuId == 1093, -->

          <div
            class="menu-item nav-level"
            :class="{ active: allMenuClick, child: childName }"
            :ref="`tabAllRef`"
            @click="goPage('All')"
            v-else
          >
            {{ childName ? childName : menu.menuName }} <span> ></span>
          </div>
        </template>
        <div class="nav-active" v-if="activeReady" ref="navActive"></div>
      </div>

      <div class="search-iew" v-if="searchShow">
        <div class="view-line">
          <el-input
            class="search-input"
            v-model="searchValue"
            @keyup.enter.native="searchArticle(searchValue)"
            :placeholder="$t('searchTheSite')"
          ></el-input>
          <div class="search-btn" @click="searchArticle(searchValue)">
            {{ $t('search') }}
          </div>
        </div>
      </div>
    </nav>
    <nav class="nav-h5" v-else>
      <i
        class="el-icon-close"
        v-if="activeReady"
        @click="toggleActive"
        style="color: #515151; font-size: 24px"
      ></i>
      <img
        src="@/assets/images/menu-icon.png"
        class="menu-icon"
        @click="toggleActive"
        v-if="!activeReady"
      />
      <img
        v-if="this.$store.state.lang !== 'EN'"
        class="nav-icon"
        @click="goPage('/')"
        src="@/assets/images/nav-logo-blue.png"
        alt="中国新闻发布"
      />
      <img
        v-if="this.$store.state.lang === 'EN'"
        class="nav-icon"
        @click="goPage('/')"
        src="@/assets/images/nav-logo-blue-en.png"
        alt="中国新闻发布"
      />
      <div class="btn-item nav-car" @click="this.$goShopping">
        <img src="@/assets/images/nav-car02.png"/>
        {{ $t('subscribe') }}
      </div>
      <transition name="fade">
        <div
          class="nav-menu"
          :class="{ no: activeReady === false }"
          ref="myTabRef"
          v-if="activeReady"
        >
          <div>
            <template v-for="(menu, index) in menuList">
              <!-- disabled: menu.menuId == 1093, -->
              <!-- @click="menu.menuId == 1093 ? '' : goPage(menu)" -->
              <div
                class="menu-item"
                v-if="menu.path != '0'"
                :class="{
                  active: menu.path === $path,
                }"
                @click="goPage(menu)"
                :key="index"
                :ref="`tab${menu.menuNameEnglish}Ref`"
              >
                {{ menu.menuName }}
              </div>
            </template>
            <div
              v-for="(child, cdx) in childMenuList"
              class="menu-item"
              :class="{
                active: child.path === $path,
              }"
              @click="goPage(child)"
              :key="cdx"
              :ref="`tab${child.lmName}Ref`"
            >
              {{ child.lmName }}
            </div>
            <div class="menu-item">
              <span v-if="!lang || lang != 'EN'" @click="switchLanguage('EN')"
              >English</span
              >
              <span v-if="lang === 'EN'" @click="switchLanguage('CN')"
              >中文CN</span
              >
            </div>
          </div>

          <div class="nav-active" v-if="activeReady" ref="navActive"></div>
        </div>
      </transition>
    </nav>
    <!-- <transition name="fade"> -->
    <div class="menu-child" v-if="allMenuClick">
      <template v-for="(menu, cdx) in menuList">
        <div
          v-if="menu.menuName != '首页' && menu.path != '0'"
          class="child-item"
          :class="{ active: menu.path === $path }"
          @click="goPage(menu)"
        >
          {{ menu.menuName }}
        </div>
      </template>
      <div
        class="child-item"
        :class="{ active: child.path === $path }"
        @click="goPage(child)"
        v-for="(child, cdx) in childMenuList"
        :key="cdx"
      >
        {{ child.lmName }}
      </div>
    </div>
    <!-- </transition> -->
    <!-- v-if="!$route.meta.keepAlive" -->
    <!-- <keep-alive exclude="ArticleDetail,Search,Book"> -->
    <div class="app-view">
      <router-view/>
    </div>
    <!-- </keep-alive> -->
    <footer
      class="footer-view"
      :class="{ h5: this.$store.state.webType === 'h5' }"
    >
      <div style="position: relative">
        <img
          class="footer-bg"
          src="@/assets/images/footer-bg.png"
          alt="中国新闻发布"
        />
        <div class="footer-content">
          <img
            v-if="$store.state.lang == 'CN'"
            class="footer-icon"
            src="@/assets/images/footer-icon.png"
            alt=""
          />
          <img
            v-else
            class="footer-icon"
            src="@/assets/images/footer-icon-en.png"
            alt=""
          />
          <div class="link-view">
            <div class="item-view">
              <img class="link-item" src="@/assets/images/footer-link-01.png"/>
              <div>
                <img class="link-bg" src="@/assets/images/link-item-bg.png"/>
                <img class="link" src="@/assets/images/footer-link-11.png"/>
              </div>
            </div>
            <div class="item-view">
              <img class="link-item" src="@/assets/images/footer-link-02.png"/>
              <div>
                <img class="link-bg" src="@/assets/images/link-item-bg.png"/>
                <img class="link" src="@/assets/images/footer-link-22.png"/>
              </div>
            </div>
            <div class="item-view">
              <img class="link-item" src="@/assets/images/footer-link-03.png"/>
              <div>
                <img class="link-bg" src="@/assets/images/link-item-bg.png"/>
                <img class="link" src="@/assets/images/footer-link-33.png"/>
              </div>
            </div>
            <div class="item-view">
              <img class="link-item" src="@/assets/images/footer-link-04.png"/>
              <div>
                <img class="link-bg" src="@/assets/images/link-item-bg.png"/>
                <img class="link" src="@/assets/images/footer-link-44.png"/>
              </div>
            </div>
            <!-- <div class="item-view">
              <img class="link-item" src="@/assets/images/footer-link-05.png" />
              <div>
                <img class="link-bg" src="@/assets/images/link-item-bg.png" />
                <img class="link" src="@/assets/images/footer-link-55.png" />
              </div>
            </div>
            <div
              v-if="$store.state.webType === 'h5'"
              style="width: 100%; height: 6px"
            ></div>
            <div class="item-view">
              <img class="link-item" src="@/assets/images/footer-link-06.png" />
              <div>
                <img class="link-bg" src="@/assets/images/link-item-bg.png" />
                <img class="link" src="@/assets/images/footer-link-66.png" />
              </div>
            </div>
            <div class="item-view">
              <img class="link-item" src="@/assets/images/footer-link-07.png" />
              <div>
                <img class="link-bg" src="@/assets/images/link-item-bg.png" />
                <img class="link" src="@/assets/images/footer-link-77.png" />
              </div>
            </div>
            <img
              class="link-item"
              @click="
                windowOpen(
                  'https://www.facebook.com/China-News-Release-106059441916413/',
                  '_blank'
                )
              "
              src="@/assets/images/footer-link01.png"
            />
            <img
              class="link-item"
              @click="
                windowOpen(
                  'https://twitter.com/zgxwfb?t=8jNydSLBYI2pHPFnkpiHGg&s=09',
                  '_blank'
                )
              "
              src="@/assets/images/footer-link02.png"
            />
            <img
              class="link-item"
              @click="
                windowOpen(
                  'https://youtube.com/channel/UCcMHW5dnzkK8w6Gb7EQRIKQ',
                  '_blank'
                )
              "
              src="@/assets/images/footer-link03.png"
            /> -->
          </div>
        </div>
      </div>
      <div class="footer-bottom" :class="{ pd: $store.state.lang == 'EN' }">
        <div style="margin-right: auto" v-if="$store.state.lang == 'CN'">
          中共中央宣传部主管 五洲传播出版传媒有限公司主办
        </div>
        <div>
          {{ $t('copyright') }} |  <span style="cursor: pointer;" @click="goContact()">{{ $t('contact') }}</span>
        </div>
        <div v-if="$store.state.lang == 'CN'">
          <a
            href="https://beian.miit.gov.cn/#/Integrated/index"
            style="color: #fff"
          ><span>备案号：</span> 京ICP备13021801号-5</a
          >
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
// 在需要的组件中引入切换的方法
import {setI18nLanguage} from './lang/index';
// const dlMenu = ["", "", "", "", ""];
export default {
  data() {
    return {
      htmlShow: false,
      childName: '',
      allMenuClick: false,
      btnFlag: false, // 记录当前返回顶部标志的可视状态
      scrollTop: 0, // 当前滚动位置

      activeReady: false,
      activeName: 'home',
      menuList: [],
      childMenuList: [],
      searchValue: '',
      searchShow: false,
      webLinks: {
        tvUrl: '',
      },
      isPlay: false,
      lang: 'CN',
      player: false,
    };
  },

  created() {
    window.addEventListener('popstate', (e) => {
      const that = this;
      setTimeout(() => {
        console.log(that.$route.path);
        const { path } = that.$route;
        that.$store.state.menuList.forEach((menu, index) => {
          console.log(menu.path, '-----------', menu.path === path, path);
          // console.log(menu);
          if (menu.path === path) {
            if (menu.menuNameEnglish) {
              that.scrollLeftTo(menu.menuNameEnglish);
              that.childName = '';
            } else {
              that.scrollLeftTo('All');
              // this.childName =
              //   this.$store.state.lang == "CN" ? obj.lmName : obj.lmNameEnglish;
              that.childName = menu.lmName;
              // console.log(that.childName);
            }
          }
        });
      }, 100);
    }, false);
    window.addEventListener('scroll', this.scrollToTop); // 监听滚动条
    // 获取当前语言
    this.lang = localStorage.getItem('lang');
    const lang = this.getQueryString('lang');
    // console.log(lang);
    if (this.getQueryString('lang')) {
      localStorage.setItem('lang', lang);
      this.$store.commit('setLang', lang);
      this.lang = lang;
      setI18nLanguage(lang);
    } else if (this.lang && this.lang === 'EN') {
      this.$store.commit('setLang', 'EN');
      this.lang = 'EN';
    } else {
      localStorage.setItem('lang', 'CN');
      this.$store.commit('setLang', 'CN');
      this.lang = 'CN';
    }

    const that = this;
    // 检测设备屏幕宽度
    if (document.body.offsetWidth < 980) {
      that.$store.commit('setWebType', 'h5');
      this.activeReady = false;
    } else {
      that.$store.commit('setWebType', 'pc');
    }
    window.addEventListener('resize', () => {
      that.screenWidth = document.body.offsetWidth;
      // console.log("window.screenWidth", document.body.offsetWidth);
      if (document.body.offsetWidth < 980) {
        that.$store.commit('setWebType', 'h5');
        that.activeReady = false;
      } else {
        // that.scrollLeftTo(this.activeName);
        that.$store.commit('setWebType', 'pc');
      }
    });
    // console.log('this.$route.query', this.$route.query);
    // console.log('this.$path', this.$path);

    const token = this.getQueryString('token');
    // console.log(token);
    if (token) {
      sessionStorage.setItem('token', token);
    }
    this.$appType.name = this.$store.state.webType;
    // if (this.menuList.length == 0) {
    this.getMenuList();
    this.getHotArticle();
    this.getNewBook();
    this.getLinks();
    // console.log(sessionStorage.getItem("webLinks"));
    // if (
    //   window.location.href.indexOf("token") === -1 &&
    //   window.location.href.indexOf("lang") === -1
    // ) {
    //   // 非预览
    //   // 如果是移动设备  不播放视频
    //   if (this.$store.state.webType == "h5") {
    //     this.isPlay = false;
    //     sessionStorage.setItem("isPlay", 1);
    //   } else {
    //     if (sessionStorage.getItem("isPlay") != 1) {
    //       if (window.location.href.indexOf("book") === -1) {
    //         this.isPlay = true;
    //       }
    //     } else {
    //       this.isPlay = false;
    //     }
    //   }
    // } else {
    //   // 预览
    //   this.isPlay = false;
    //   sessionStorage.setItem("isPlay", 1);
    //   // console.log(this.webLinks);
    // }

    // this.videoTimer = setInterval(() => {
    //   that.$nextTick(() => {
    //     // console.log("playVideo", this.isPlay);
    //     if (that.player == false && this.isPlay == true) {
    //       that.playVideo();
    //     } else {
    //       clearInterval(that.videoTimer);
    //     }
    //   });
    // }, 500);
  },
  destroyed() {
    localStorage.setItem('lang', this.$store.state.lang);
    window.removeEventListener('scroll', this.scrollToTop); // 移除滚动条监听
  },
  computed: {
    listenRoutePathState() {
      return this.$store.state.routePath;
    }
  },
  watch: {  //监听全局变量componentId的变化
    listenRoutePathState: function (val, oldval) {
      // console.log(val, oldval);
      this.menuList.forEach((value) => {
        // console.log(value);
        if (value.path == this.$path) {
          // this.childName = value.lmName;
          // console.log(value);
          this.scrollLeftTo(value.menuNameEnglish);
        }
      });
      // if (val != this.compId) {
      //   this.showPop = false;
      // }
    }
  },
  methods: {
    allMenuShow() {
      this.allMenuClick = !this.allMenuClick;
    },
    goContact() {
      this.$router.push('/about')
    },
    // 为了计算距离顶部的高度，当高度大于200显示回顶部图标，小于200则隐藏
    scrollToTop() {
      const that = this;
      const scrollTop = window.pageYOffset
        || document.documentElement.scrollTop
        || document.body.scrollTop;
      that.scrollTop = scrollTop;
      // console.log(that.scrollTop);
      if (that.scrollTop > 200) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    playVideo() {
      const that = this;
      this.$nextTick(() => {
        that.$refs.homeVideo.play();
        that.player = true;
        clearInterval(that.videoTimer);
      });
      // console.log(this.$refs.homeVideo.play);
    },
    getQueryString(name) {
      const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
      const r = window.location.search.substr(1)
        .match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    toggleActive() {
      this.activeReady = !this.activeReady;
    },
    // 切换语言方法
    switchLanguage(lang) {
      // setI18nLanguage(lang);
      // // 将语言放入localStorage，在初始化语言时取出，从而刷新页面时，不会恢复初始语言
      // localStorage.setItem("lang", lang);
      // this.lang = lang;
      // this.$router.push("/");
      // location.reload();

      const routeData = this.$router.resolve({
        path: '/',
        query: { lang },
      });
      window.open(routeData.href, '_blank');
    },
    handleExitFullScreen(e) {
      // console.log(e);
      this.isPlay = false;
      sessionStorage.setItem('isPlay', 1);
      // this.exitFullscreen(e.target);
    },
    windowOpen(url, type) {
      window.open(url, type);
    },
    // 获取网站设置
    getLinks() {
      this.$get(`${this.$api}/cms/web/getLinks`)
        .then((res) => {
          // console.log(res);
          const obj = res.data;
          for (const key in obj) {
            typeof obj[key];
            if (obj[key]) {
              this.webLinks[key] = JSON.parse(obj[key]);
              // console.log(this.webLinks);
            }
          }
          // console.log(this.webLinks);
          sessionStorage.setItem('webLinks', JSON.stringify(this.webLinks));
        });
    },
    searchArticle(val) {
      this.searchShow = false;
      this.searchValue = '';
      this.$router.push({
        path: '/search',
        query: { value: val },
      });
    },
    getHotArticle() {
      this.$get(`${this.$api}/cms/web/getHotArticles`)
        .then((res) => {
          this.$store.commit('setHotArticle', res.data);
        });
    },
    getNewBook() {
      this.$get(`${this.$api}/cms/web/getNewBook`)
        .then((res) => {
          this.$store.commit('setNewBook', res.data);
        });
    },

    async getMenuList() {
      this.menuList = this.$store.state.menuList;
      await this.$get(`${this.$api}/cms/web/daoHangLan`, {})
        .then((res) => {
          // console.log(res);
          this.menuList = res.data;
          const vueMenu = [];
          const childMenu = [];
          this.menuList.forEach((value) => {
            if (value.path == '0') {
              // value.children = [];
              for (let i = 0; i < value.cnPart.length; i++) {
                // value.children.push(value.cnPart[i].path);
                // vueMenu.push(value.cnPart[i]);
                childMenu.push(value.cnPart[i]);
              }
              // console.log(this.$store.state.menuList);
            }
            // else {
            vueMenu.push(value);
            // }
            // this.$store.commit("setMenuList", vueMenu);
          });
          this.childMenuList = childMenu;
          this.childMenuList.forEach((value) => {
            if (value.path == this.$path) {
              this.childName = value.lmName;
            }
          });
        });
    },
    goPage(obj) {
      if (obj == 'All') {
        this.allMenuClick = !this.allMenuClick;
        return;
      }
      if (obj === '/') {
        obj = {
          cnPart: null,
          columnId: null,
          menuId: 1084,
          menuName: '首页',
          menuNameEnglish: 'Home',
          path: '/',
        };
      }
      if (obj.path != 0 && obj.path !== this.$path) {
        this.$router.push(obj.path);
        if (this.$store.state.webType == 'h5') {
          this.activeReady = false;
        } else {
          this.activeReady = true;
        }

        // 触发滑动方法
        // console.log(obj);
        if (obj.menuNameEnglish) {
          this.scrollLeftTo(obj.menuNameEnglish);
          this.childName = '';
        } else {
          this.scrollLeftTo('All');
          // this.childName =
          //   this.$store.state.lang == "CN" ? obj.lmName : obj.lmNameEnglish;
          this.childName = obj.lmName;
          // console.log(this.childName);
        }
      }
    },
    // 滑动
    scrollLeftTo(name) {
      // console.log(name);
      this.allMenuClick = false;
      this.$nextTick(() => {
        const ref = `tab${name}Ref`;
        this.activeName = name;
        // console.log(this.activeName);
        // 获取myTabRef的DOM元素，即类名为my-tab的标签
        const nav = this.$refs.myTabRef;
        const active = this.$refs.navActive.style;

        // 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
        const title = this.$refs[ref][0];
        // console.log(nav.offsetWidth, title.offsetLeft);
        // console.log("nav", nav, title);
        // 计算位移偏差
        const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
        // console.log(to);
        // console.log(title.offsetLeft, title.offsetWidth);
        active.left = `${title.offsetLeft + title.offsetWidth / 2}px`;
        // active.scrollLeft = to;
      });
    },
  },
};
</script>
<style>
[v-cloak] {
  display: none;
}
</style>
<style lang="scss">
.app-view {
  width: 100vw;
  min-height: 100vh;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.book .navbar,
.book .footer-view {
  display: none !important;
}

.el-carousel__arrow {
  width: 50px;
  height: 50px;
  font-size: 25px;
  background-color: rgba(31, 45, 61, .50);
}

#app {
  color: $sh;
  overflow-x: hidden;

  &.mobile {
    .footer-view .footer-bg {
      width: 160%;
    }
  }

  .el-breadcrumb {
    display: none !important;
  }

  .h5 > .page {
    padding-top: fh(60vh, h5) !important;

    .el-breadcrumb .el-breadcrumb__inner {
      font-weight: bold;
      font-size: 1.5vh !important;
    }

    .banner-view {
      margin-top: 0;
    }

    .tab-info {
      font-size: fh(12vh, h5);

      img {
        width: fw(20vw, h5) !important;
      }
    }
  }

  .h5.pt {
    padding-top: fh(30vh, h5) !important;
  }

  .h5 .art-col .art-view {
    min-height: fh(500vh, h5);
  }

  .h5 .art-row .tab-info img {
    width: fw(20vw, h5) !important;
  }

  .h5 .page-content {
    // padding-right: 0 !important;
    padding: 0 fw(10vw, h5) fh(40vh, pc) fw(10vw, h5);

    .art-col .art-view .art-item .art-content {
      padding: fh(10vh, h5) fw(10vw, h5) !important;
    }
  }

  .h5 .art-col {
    width: 100% !important;
  }

  .art-view {
    padding-bottom: fh(50vh, h5);

    .art-more {
      position: absolute;
      bottom: fh(20vh, h5);
      left: 50%;
      transform: translate(-50%, 0);
      margin: 0 !important;
    }
  }

  .h5 {
    .art-row {
      flex-wrap: wrap;
    }

    .book-content .book-row {
      align-items: center;

      img.book-img {
        width: 51%;
        height: auto;
      }

      .book-text {
        flex: 1;
        margin-left: fw(10vw, h5);
      }
    }

    .book-content .book-btn {
      img {
        width: 30%;
      }
    }
  }

  .go-top {
    display: none;
  }

  .page[data-v-448a3d9d]::after {
    background-size: auto 100% !important;
  }

  &::after {
    background-size: contain !important;
  }

  .art-row {
    .tab-info {
      font-size: fh(12vh, h5);

      .toggle-img {
        margin-right: 24px !important;
      }

      img {
        width: fw(20vw, pc) !important;
      }
    }

    .art-tab .tab-item {
      font-size: fh(14vh, h5);

      &.active {
        font-size: fh(16vh, h5);
      }
    }

    .row-right {
      margin: 0;
      margin-top: fh(15vh, h5);
      // .hot-article .article-view .article-item {
      //   width: 90vw !important;
      // }

      .art-col {
        width: 100%;

        .el-col-8 {
          width: 50%;

          .art-item {
            img {
              height: auto;
            }
          }
        }

        .art-label {
          font-size: fh(12vh, h5);
          margin-top: fh(15vh, h5);
          margin-bottom: 0;

          &:after {
            bottom: fh(-4vh, h5);
            right: fw(-4vw, h5);
            width: fw(10vw, h5);
            height: fh(10vh, h5);
            border-right: 2px solid $zh;
            border-bottom: 2px solid $zh;
          }
        }

        .say-more {
          font-size: fh(12vh, h5);
          top: fh(15vh, h5);
        }
      }
    }
  }

  .h5 {
    .say-row,
    .say-view {
      flex-wrap: wrap;

      .row-right {
        margin: 0;
        margin-top: fh(15vh, h5);

        .hot-article .article-view .article-item {
          width: 90vw;
        }

        .book-content .book-row {
          align-items: center;

          img.book-img {
            width: 51%;
            height: auto;
          }

          .book-text {
            flex: 1;
            margin-left: fw(10vw, h5);
          }
        }

        .book-content .book-btn {
          img {
            width: 30%;
          }
        }
      }

      .img-say {
        width: 100%;

        .el-col-8 {
          width: 50%;

          .say-item {
            img {
              height: auto;
            }
          }
        }

        .say-label {
          font-size: fh(12vh, h5);
          margin-top: fh(15vh, h5);
          margin-bottom: 0;

          &:after {
            bottom: fh(-4vh, h5);
            right: fw(-4vw, h5);
            width: fw(10vw, h5);
            height: fh(10vh, h5);
            border-right: 2px solid $zh;
            border-bottom: 2px solid $zh;
          }
        }

        .say-more {
          font-size: fh(12vh, h5);
          top: fh(15vh, h5);
        }
      }
    }
  }

  .fix-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 99999;

    .model {
      position: relative;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #000;
      // opacity: 0.9;
    }

    video {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      // left: 10%;
    }

    .jump-view {
      position: absolute;
      width: 80%;
      top: 50px;
      left: 10%;

      .jump {
        position: fixed;
        left: 50%;
        bottom: fh(60vh, pc);
        padding: fh(16vh, pc) fw(40vw, pc);
        transform: translateX(-50%);
        color: $zh;
        font-size: fh(20vh, pc);
        font-weight: 900;
        border-radius: fw(21vw, pc);
        // background: linear-gradient(
        //   to right,
        //   rgba(238, 238, 238, 0.521),
        //   rgba(204, 204, 204, 0.438)
        // );
        &:hover {
          opacity: 0.8;
          cursor: pointer;
        }
      }
    }
  }
}

.footer-view {
  position: relative;
  width: 100vw;
  box-sizing: border-box;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.21) 100%
    );
    // opacity: 0.5;
    z-index: 9;
  }

  .footer-content {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    left: 0;
    padding-left: fw(140vw, pc);

    .footer-icon {
      width: fw(500vw, pc);
    }

    .link-view {
      display: flex;
      align-items: center;
      margin-right: fw(40vw, pc);
      flex-wrap: wrap;
      margin-left: auto;

      .link-item {
        margin-right: fw(40vw, pc);
        width: fw(48vw, pc);
        border-radius: 50%;
        position: relative;
        cursor: pointer;
      }

      .item-view {
        position: relative;

        > div {
          display: none;
          width: fw(140vw, pc);
          position: absolute;
          top: -10px;
          left: 50%;
          transform: translateX(-64%) translateY(-100%);

          .link-bg {
            width: fw(140vw, pc);
          }

          .link {
            position: absolute;
            top: fw(6vw, pc);
            left: fw(10vw, pc);
            width: fw(120vw, pc);
          }

          img {
            display: block;
          }
        }

        &:hover {
          > div {
            display: block;
          }
        }
      }
    }
  }

  .footer-bg {
    width: 100%;
    display: block;
  }

  .footer-bottom {
    position: relative;
    z-index: 99;
    background-color: #a1b8bd;
    color: #ececec;
    display: flex;
    width: 100%;
    padding: fh(11vh, pc) fw(80vw, pc) fh(9vh, pc) fw(80vw, pc);
    font-size: fh(14vh, pc);
    line-height: fh(20vh, pc);
    // padding-left: fw(680vw, pc);
    margin-top: -2px;

    &.pd {
      justify-content: center;
    }

    div {
      margin-right: fw(60vw, pc);

      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
}

.footer-view.h5 {
  .footer-content {
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);

    .footer-icon {
      width: 42%;
    }

    .link-view {
      flex: 1;
      margin-left: fw(20vw, h5);
      margin-top: 0;
      // justify-content: space-around;
      // margin-right: fw(30vw, h5);
      .link-item {
        width: 10%;
        display: block;
      }

      .item-view {
        width: 10%;
        margin-right: fw(40vw, pc);

        .link-item {
          // margin-right: 0;
          width: 100%;
        }

        > div {
          width: fw(100vw, h5);
          position: absolute;
          top: -10px;
          left: 50%;
          transform: translateX(-50%) translateY(-100%);

          .link-bg {
            width: fw(100vw, h5);
          }

          .link {
            position: absolute;
            top: fw(6vw, h5);
            left: fw(10vw, h5);
            width: fw(80vw, h5);
          }

          img {
            display: block;
          }
        }

        &:hover {
          > div {
            display: block;
          }
        }
      }
    }
  }

  .footer-bottom {
    padding: 10px 20px;
    flex-wrap: wrap;

    div {
      width: 100%;
      margin: 5px 0;
      text-align: center;
    }
  }
}

.nav-h5 {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100vw;
  display: flex;
  align-items: center;
  background: #edf1f3;
  padding: 8px 20px;
  justify-content: space-between;

  &.all {
    background: rgba(15, 0, 0, 1);
  }

  .nav-menu {
    position: fixed;
    width: 100%;
    top: 40px;
    left: 0;
    background-color: #f5f5f5;
    padding: fh(5vh, h5) fw(20vw, h5);
    height: 100vh;
    z-index: 999;
    border-top: 1px solid #e9e9e9;

    > div {
      display: flex;
      flex-wrap: wrap;

      .menu-item {
        // background: #e9e9e9;
        color: $sh;
        width: 50%;
        padding: fh(15vh, h5) 0;
        border-bottom: 1px solid #e9e9e9;
        text-align: center;

        &.disabled {
          color: #999;
          cursor: auto;
        }

        &.active {
          color: #0046b4;
          font-weight: bold;
        }

        &.nav-level.active {
          color: #fff;
        }

        &:nth-child(odd) {
          border-right: 1px solid #e9e9e9;
        }

        &:nth-last-child(1) {
          border-bottom: none;
        }
      }
    }
  }

  img {
    display: block;
  }

  .menu-icon {
    width: 24px;
  }

  .nav-icon {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 120px;
    transform: translateX(-50%);
  }

  .btn-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    // padding-right: fw(100vw, pc);
    color: #515151;

    img {
      width: 20px;
      display: block;
      margin-right: 4px;
      opacity: 0.7;

      &:hover {
        color: $zh;
        cursor: pointer;
      }
    }
  }
}

.top .page {
  padding-top: fh(40vh, pc) !important;
}

.top .fix-line {
  position: relative;
  top: 0;
}

.fix-line {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
  height: fh(46vh, pc);
  background: linear-gradient(90deg, #6d9dff 0%, #3b64fd 100%);

  .nav-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-right: fw(100vw, pc);

    .btn-item {
      display: flex;
      align-items: center;
      color: rgba(255, 255, 255, 0.5);

      img {
        width: fw(24vw, pc);
        display: block;
        margin-right: fw(8vw, pc);
        opacity: 0.7;

        &:hover {
          color: #fff;
          cursor: pointer;
        }
      }

      &.nav-search img {
        width: fw(32vw, pc);
      }

      &:hover {
        img {
          opacity: 1;
        }
      }

      &.nav-lan {
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        margin: 0 fw(36vw, pc);

        span {
          display: block;
          text-align: center;
          width: max-content;
          margin: 0 fw(16vw, pc);

          &:hover {
            color: #fff;
            cursor: pointer;
          }
        }
      }

      &.nav-car:hover {
        color: #fff;
        cursor: pointer;
      }
    }
  }
}

.top .menu-child {
  position: relative;
  top: 0 !important;
}

.menu-child {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100vw;
  // background: #e9e9e9;
  top: fh(110vh, pc);
  left: 0;
  padding: 0 fh(80vh, pc);
  padding-bottom: fh(40vh, pc);
  z-index: 9;
  opacity: 1 !important;
  background-color: #dee5ff;
  z-index: 999;

  .child-item {
    color: rgba(251, 254, 255, 0.8);
    font-weight: normal;
    margin-right: fw(40vw, pc);
    margin-top: fh(40vh, pc);
    font-size: fh(20vh, pc);
    color: #535353;
    line-height: fh(30vh, pc);

    &:hover {
      cursor: pointer;
      color: #0046b4;
      opacity: 0.8;
    }

    &.active {
      color: #0046b4;
      color: $zh;
      font-weight: bold;
      // color: $zh;
    }
  }

  /*display: none;*/
}

.top .navbar {
  position: relative;
  top: 0;
}

.navbar {
  position: fixed;
  left: 0;
  top: fh(46vh, pc);
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100vw;
  background: #edf1f3;
  color: #535353;
  font-size: fh(16vh, pc);
  min-height: fh(68vh, pc);
  /*padding: fh(14vh, pc) fw(80vw, pc) fh(14vh, pc) fw(40vw, pc);*/

  .nav-icon {
    width: fw(180vw, pc);
    color: $zh;
    margin-left: fw(40vw, pc);

    .cn {
      font-size: fh(26vh, pc);
      margin-bottom: fh(2vh, pc);
    }

    .en {
      font-size: fh(14vh, pc);
    }
  }

  .nav-icon:hover {
    cursor: pointer;
    opacity: 0.8;
  }

  .nav-menu {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    // position: relative;
    .menu-item {
      position: relative;
      margin: 0 fw(6vw, pc);
      padding: 0 fw(6vw, pc);
      flex-shrink: 0;
      height: fh(68vh, pc);
      display: flex;
      align-items: center;
      font-size: fh(10vw, pc);

      &.disabled {
        color: #999;

        &:hover {
          // font-weight: bold;
          cursor: no-drop;
        }
      }

      &.nav-level {
        margin-left: fw(60vw, pc);
        padding: 0 fw(25vw, pc);

        span {
          color: #686a67 !important;
          font-size: fh(10vh, pc);
          margin-left: fw(8vw, pc);
          transform: rotate(-90deg);
          transition: transform 300ms;
        }

        &.child {
          color: $zh !important;
          font-weight: bold;
          background: #e9e9e9;
        }

        &.active {
          color: #535353;
          background: #dee5ff;

          span {
            transform: rotate(90deg);
          }
        }
      }

      &.active {
        // font-size: fh(18vh, pc);
        font-weight: bold;
        color: #0046b4;
      }
    }

    .nav-active {
      position: absolute;
      width: fw(40vw, pc);
      height: fh(4vh, pc);
      background-color: $zh;
      bottom: fw(4vh, pc);
      transform: translateX(-50%);
      transition: left 0.3s;
    }

    &.no {
      .menu-item.active {
        &::after {
          content: "";
          position: absolute;
          width: fw(40vw, pc);
          height: fh(4vh, pc);
          background-color: $zh;
          left: 50%;
          bottom: fw(4vh, pc);
          transform: translateX(-50%);
        }
      }
    }

    // .menu-item.active
    .menu-item:hover {
      // font-weight: bold;
      cursor: pointer;
      opacity: 0.8;
      // &::after {
      //   content: "";
      //   position: absolute;
      //   width: fw(40vw, pc);
      //   height: fh(4vh, pc);
      //   background-color: $zh;
      //   left: 50%;
      //   bottom: fw(4vh, pc);
      //   transform: translateX(-50%);
      // }
    }
  }

  .search-iew {
    position: absolute;
    width: 100vw;
    top: fh(68vh, pc);
    left: 0;
    padding: fw(36vh, pc);
    background-color: #dee5ff;

    .view-line {
      width: 60%;
      display: flex;
      align-items: center;
      margin-left: 20%;

      .search-input {
        flex: 1;
        font-size: fh(14vh, pc);
        height: fh(48vh, pc);
        line-height: fh(48vh, pc);
      }

      .search-btn {
        width: 120px;
        height: fh(48vh, pc);
        line-height: fh(48vh, pc);
        background: #0046b4;
        font-size: fh(16vh, pc);
        text-align: center;
        border-radius: 10px;
        margin-left: 12px;
        color: white;

        &:hover {
          opacity: 0.8;
          cursor: pointer;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /* 高宽分别对应横竖滚动条的尺寸 */
  height: 8px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(219, 219, 219, 0.7);
  background: #d6d6d6;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  background: #ffffff;
}

.en {
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  sub,
  sup,
  tt,
  var,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video,
  nav,
  .el-col,
  .el-row {
    // font-family: Arial, Helvetica, sans-serif;
    font-family: "Times New Roman", Times, serif;
  }
}
</style>
